<template>
  <el-container>
    <el-header>
      <span>项目编号:</span>
      <el-input placeholder="请输入内容" v-model="input1" clearable>
      </el-input>
      <span>项目名称:</span>
      <el-input placeholder="请输入内容" v-model="input2" clearable>
      </el-input>
      <span>采购类别:</span>
      <el-select v-model="value"  placeholder="请选择" @change="selectProductType">
        <el-option
            v-for="{purchaseCategoryId, purchaseCategoryName} in options"
            :key="purchaseCategoryId"
            :label="purchaseCategoryName"
            :value="{value:purchaseCategoryName,label:purchaseCategoryId}">
        </el-option>
      </el-select>
      <el-button type="primary" @click="query(input1,input2,label)">查询</el-button>
      <el-button type="primary" @click="resetfitter">重置查询条件</el-button>
    </el-header>
    <el-main>
      <el-table :data="projectList" border style="width: 100%"
                :row-class-name="rowClassName" @row-click="handleRowClick"
      >
        <el-table-column
            prop="projectCode"
            label="项目编号"
            min-width="14%">
        </el-table-column>
        <el-table-column
            prop="projectName"
            label="项目名称"
            min-width="12%">
        </el-table-column>
        <el-table-column
            prop="purchaseCategoryName"
            label="采购类别"
            min-width="7%">
        </el-table-column>
        <el-table-column
            prop="purchaseMethod"
            label="采购方式"
            min-width="7%">
        </el-table-column>
        <el-table-column
            prop="budget"
            label="预算金额(元)"
            min-width="9%">
        </el-table-column>
        <el-table-column
            prop="quaSubmitStatus,quaApproveStatus"
            label="资格条件审批状态"
            min-width="14%">
          <template slot-scope="scope">
            {{scope.row.quaSubmitStatus}}（{{scope.row.quaApproveStatus}}）
          </template>
        </el-table-column>
        <el-table-column
            prop="quaApproveTime"
            label="审批通过时间"
            min-width="14%">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="14%">
        </el-table-column>
        <el-table-column
            prop="purchaseCategoryID"
            label="操作"
            min-width="9%">
          <template slot-scope="scope">
            <el-button v-if="scope.row.flag"  type="text" style="margin-left: 0px" @click="goToManage(scope.row.flag,scope.row.index)">签到表管理</el-button>
            <el-button v-if="!scope.row.flag" type="text"  style="color: rgb(128,128,128);margin-left: 0px" @click="goToManage(scope.row.flag,scope.row.index)">签到表管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10,5,20]"
            :page-size="pagesize"
            layout="total,sizes,prev,pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import axios from "axios";
import request from "@/utils/request";
import {constantRoutes} from "@/router";

export default {
  name: "index",
  data() {
    return {
      input1: '',
      input2: '',
      options: [],
      label:'',
      value: '',
      projectList: [],
      tabledata:[],
      total:'',
      currentPage:1,
      pagesize: 10,
    }
  },

  methods: {

    selectProductType(data){
      // 将data对象解构
      const { value, label } = data;
      this.value = value;
      this.label = label;
      console.log(this.label)
      console.log(this.value)
    },

    rowClassName({ row, rowIndex }) {
      // 将索引号赋值给 row.index
      row.index = rowIndex;
    },

    // 处理行点击事件
    handleRowClick(row) {
      // 获取 row.index 作为参数
      console.log(row.index);
    },
    handleSizeChange(size){
      this.pagesize=size
      this.loadtable(1)
    },
    handleCurrentChange(page) {
      this.currentPage=page
      this.loadtable(page)
    },

    async onload(){
      let that = this
      let res=await request({
        url: "/AttendanceSheet",
        method: "post",
      })
      console.log("here",res),
          console.log(res.data.data.ProjectList)
      that.tabledata=res.data.data.ProjectList
      that.options=res.data.data.PurchaseCategory
      that.total=res.data.data.ProjectList.length
      that.loadtable(1)

    },
    loadtable(index){
      var i=0
      this.projectList=[]
      for(i=0;i<this.pagesize;i++){
        if((index-1)*this.pagesize+i===this.total){
          break
        }
        this.projectList.push(this.tabledata[(index-1)*this.pagesize+i])
      }
      console.log("table",this.tabledata,"list",this.projectList)
    },

    goToManage(flag,index) {
      if(!flag){
        this.$message({
          message:"只有采购文件环节完成方可进行此步",
          type:"warning"
        })
        return
      }

      console.log("this",index)
      // 使用query传递参数
      this.$router.push({
        path: '/AttendanceSheetManage',
        query: this.projectList[index]
      })
    },


   async query(input1,input2,label) {
      let data = {}
      if(label!=='')
      {
        data["purchaseCategoryId"]=label
      }
      if(input1!=='')
      {
        data["projectCode"]=input1
      }
      if(input2!=='')
      {
        data['projectName']=input2
      }
     data['orderby']='createTime'
      let res = await request({
        url: "/AttendanceSheet/query",
        method: "post",
        data: data
      })
      this.tabledata=res.data.data
      this.total=this.tabledata.length
      this.currentPage=1
      this.loadtable(1)
    },
    resetfitter(){
      this.input1=''
      this.input2=''
      this.value=''
      this.query()
    }
  },

  created() {
    this.onload()
  },

}
</script>

<style scoped>
.el-header {
  background-color: rgb(255,255,255);
  line-height: 80px;
}
.el-footer{
  text-align: center;
  background-color: rgb(255,255,255);
  line-height: 60px;
}
.el-input, .el-select{
  width: 190px;
}
.el-button{
  margin-left: 20px;
}


.el-main {
  background-color: rgb(255,255,255);
  color: #333;
  text-align: center;

}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
